const prompt = $('.prompt:eq(0)'); //获取 提示 元素
const textarea = $('#user_input'); // 获取 textarea 元素

/*
*  发送消息函数
*  @send_user 消息发送者, 用以表示发送者身份
*  @content 消息内容
*  */
function send_msg(send_user, content) {
    var chat_list = $('.chat:eq(0)'); // 获取 消息框元素

    // 创建一条消息
    var p = $('<p></p>');
    p.addClass(send_user);
    p.html(content);

    // 添加消息到消息框中
    chat_list.append(p);

    // 每次发送消息滚动条自动向下滚动
    // 获取滚动条的高度 这里使用js原生方法
    var scroll_height = chat_list[0].scrollHeight + 'px';
    chat_list.animate({scrollTop: scroll_height}, 20);
}

// 点击发送按钮触发的方法
function send_btn_click() {
    // 判断消息框是否为空
    if (textarea.val() === '') {
        alert('输入框为空哦!');
        prompt.css('display', 'none');
        return;
    }

    // 正则把 textarea 中的\n替换为 <br> 换行
    var content = textarea.val().replace(/\n/g, '<br>');
    send_msg('me', content);

    // 暂停1秒后回复信息
    setTimeout(function () {
        send_msg('other', '嗯');
    }, 1000);


    // 发送完毕, 则清空输入框,取消提示
    textarea.val('');
    prompt.css('display', 'none');
}

/*
* 输入框获取焦点时触发的事件
* 显示 正在输入中
* */
textarea.focus(function () {
    prompt.css('display', 'unset');
});

/*
* 输入框失去焦点时触发的事件
* 移除 正在输入中
* */
textarea.blur(function () {
    prompt.css('display', 'none');
});

/*
*  输入框键盘事件
*  按下 Ctrl+Enter 发送消息
* */
textarea.keypress(function (ev) {
    // 10 : 等价于按下 Ctrl+Enter
    if (ev.keyCode === 10) {
        send_btn_click();
    }
});